<template>
  <div>
    <el-form-item label="是否跳转" :class="{ 'mb-12': config.jump }" :label-width="labelWidth">
      <el-switch v-model="config.jump"></el-switch>
    </el-form-item>
    <el-form-item v-show="config.jump" label="跳转方式" class="mb-12" :label-width="labelWidth">
      <el-radio-group v-model="config.jumpType" @change="config.url = ''">
        <el-radio :label="0">跳转链接</el-radio>
        <el-radio :label="1">跳转页面</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item v-show="!config.jumpType && config.jump" label=" " :label-width="labelWidth">
      <el-input v-model.trim="config.url"></el-input>
    </el-form-item>
    <el-form-item v-show="config.jumpType && config.jump" label=" " :label-width="labelWidth">
      <el-select v-model="config.url" placeholder="请选择页面">
        <el-option v-for="page in pageList" :key="page.id" :label="page.name" :value="page.id"></el-option>
      </el-select>
    </el-form-item>
  </div>
</template>

<script>
  export default {
    model: { prop: 'config' },
    props: {
      config: { type: Object, default: () => ({}) },
      labelWidth: { type: String, default: '' }
    },
    inject: ['getPageConfigList', 'getActivePageIndex'],
    computed: {
      // 过滤掉当前页面
      pageList() {
        const currentPage = this.pageConfigList[this.activePageIndex];
        return this.pageConfigList.filter((page) => page.id !== currentPage.id);
      },
      activePageIndex() {
        return this.getActivePageIndex();
      },
      pageConfigList() {
        return this.getPageConfigList();
      }
    }
  };
</script>

<style></style>
